import React, { useState, useEffect } from 'react';
import * as echarts from 'echarts'; // 引入的组件部分
import '../market_2.css'; //内部样式的书写
export default function Ec1(props) {
  var myecharpie = null;
  let showpie = () => {
    var echarts1_center = null;
    try {
      echarts1_center = document.querySelector('.echarts1_center');
      myecharpie = echarts.init(echarts1_center);
    } catch (error) {
      myecharpie && myecharpie.dispose();
    }
    var option1 = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br /> {b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '客户数量',
          type: 'pie',
          radius: ['30%', '60%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          data: [
            { value: 40, name: '现有客户' },
            { value: 33, name: '当地咨询' },
            { value: 0, name: '网络平台' },
            { value: 35, name: '展会' },
            { value: 0, name: '外出拜访' },
            { value: 5, name: '供应商' },
            { value: 52, name: '市场挖掘' },
            { value: 0, name: '推广' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    option1 && myecharpie.setOption(option1);
  };
  useEffect(() => {
    showpie();
    return () => {
      myecharpie && myecharpie.dispose();
    };
  });
  let show = () => {
    myecharpie.resize();
  };
  // 页面自适应重新绘制
  useEffect(() => {
    window.addEventListener('resize', show);
    return () => window.addEventListener('resize', show);
  }, []);
  return (
    <div
      className="echarts1_center"
      style={{ width: '100%', height: '100%' }}
    ></div>
  );
}
